<template>
  <div class="contentView" v-loading="formLoading" :style="`height:${contentHeight}px`">
    <div class="routeHeader">
      <el-button @click="goBack">关 闭</el-button>
    </div>
    <el-scrollbar :style="`height:${contentHeight - 63}px`">
      <p class="baseTitle">基本信息</p>
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        :inline="true"
        label-width="100px"
        v-loading="formLoading"
      >
        <el-form-item label="订单号" prop="orderNumber">
          <el-input v-model="formData.orderNumber" disabled />
        </el-form-item>
        <el-form-item label="订单类型" prop="dictOrderType">
          <el-select v-model="formData.dictOrderType" disabled>
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.MARKET_ORDER_TYPE)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户代码" prop="customerCode">
          <el-input v-model="formData.customerCode" disabled />
        </el-form-item>
        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="formData.customerName" disabled />
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <el-input v-model="formData.version" disabled />
        </el-form-item>
        <el-form-item label="产品编号" prop="productNumber">
          <el-input v-model="formData.productNumber" disabled />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="formData.productName" disabled />
        </el-form-item>
        <el-form-item label="产品规格" prop="productStandard">
          <el-input v-model="formData.productStandard" disabled />
        </el-form-item>

        <el-form-item label="出图类型" prop="dictDrawingType">
          <el-select v-model="formData.dictDrawingType" disabled>
            <el-option
              v-for="dict in getIntDictOptions('drawing_type')"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="最后更新时间" prop="updateTime">
          <el-date-picker
            v-model="formData.updateTime"
            type="date"
            disabled
            :shortcuts="shortcuts"
          />
        </el-form-item>
      </el-form>
      <p class="baseTitle">图纸明细</p>
      <el-table
        ref="tableRef"
        :data="formData.dirawingInventoryDetailedRespVOS"
        style="width: 100%"
        border
      >
        <el-table-column type="index" width="80" label="序号" align="center" />
        <el-table-column
          :property="item.val"
          :label="item.label"
          :min-width="item.width"
          :key="item.val"
          :formatter="item.val == 'releaseTime' ? dateFormatter : ''"
          v-for="item in tableTitle"
          align="left"
          header-align="left"
        >
          <template #default="scope">
            <template v-if="item.val == 'partDrawingNumber'">
              <el-button
                type="primary"
                link
                @click="jumpPdfFile(scope.row[item.val],formData.productNumber)"
                >{{ scope.row[item.val] }}</el-button
              >
            </template>
            <template v-else-if="item.val == 'dictEnableStatus'">{{ getDictLabel('dict_enable_status',scope.row[item.val])}}</template>
            <template v-else>{{ scope.row[item.val] }}</template>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
  import { jumpPdfFile } from '@/utils/formCreate'
   import { DICT_TYPE, getIntDictOptions,getDictLabel } from '@/utils/dict'
   import { dateFormatter } from '@/utils/formatTime'
   import * as DirawingInventoryApi from '@/api/technology/dirawingInventory'
   import { useTagsViewStore } from '@/store/modules/tagsView'

   const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
   const formData = ref({
     orderNumber: undefined,
     dictOrderType: undefined,
     customerName: undefined,
     customerCode: undefined,
     productNumber: undefined,
     productName: undefined,
     productStandard: undefined,
     version: undefined,
     dictDrawingType: undefined,
     creatorName: undefined,
     updaterName: undefined,
     dirawingInventoryDetailedRespVOS: undefined
   })

   /**表头 */
   const tableTitle = ref([
     {
       label: '图纸图号',
       val: 'partDrawingNumber',
       width: 200
     },
     {
       label: '零部件名称',
       val: 'partName',
       width: 200
     },
     {
       label: '版本号',
       val: 'version',
       width: 200
     },
     {
       label: '发布人',
       val: 'releaseName',
       width: 200
     },
     {
       label: '状态',
       val: 'dictEnableStatus',
       width: 200
     },
     {
       label: '发布日期',
       val: 'releaseTime',
       width: 200
     },
     {
       label: '制图人',
       val: 'designName',
       width: 200
     }
   ])

   /**返回 */
   const tagsViewStore = useTagsViewStore()
   const route = useRouter() // 路由
   const contentHeight = ref(0)
   const goBack = async () => {
     //获取当前路由并删除tagView
     tagsViewStore.delView(route.currentRoute.value)
     //跳转列表页
     route.push({
       path: '/technology/technology/drawingProduction/dirawingInventory'
     })
   }
   /** 初始化 */
   const { query } = useRoute() // 路由的查询
   onMounted(async () => {
     formLoading.value = true
     if (query.id) {
       formData.value = await DirawingInventoryApi.getDirawingInventory(query.id)
     }
     contentHeight.value = document.body.clientHeight - 127
     console.log(formData.value)
     formLoading.value = false
   })
</script>
<style lang="scss" scoped>
   .routeHeader {
     width: 100%;
     border-bottom: 1px solid #969696;
     display: flex;
     align-items: center;
     padding: 10px 0;
   }
   .baseTitle {
     font-weight: bold;
     padding: 20px 0;
   }
   .hasColor {
     color: blue;
     cursor: pointer;
   }
</style>